window.onload = function () {
    // 获取相框
    var oBox = document.getElementById('box');
    // 获取箭头框
    var oTrun = document.getElementById('trun');
    // 获取左箭头
    var oLeft = document.getElementById('left');
    // 获取右箭头
    var oRight = document.getElementById('right');
    // 获取ul
    var oImgs = document.getElementById('imgs')
    // 获取所有li
    var oList = oImgs.getElementsByTagName("li");
    // 获取小圆点
    var oBtns = document.querySelectorAll("#buttons>span");
    var flag = true;
    // 封装一个运动函数
    function animate(offset) {
        // console.log(offset);
        flag = false;
        // 设置偏移的时间
        var time = 200;
        // 设置定时器的时间
        var interval = 10;
        // 设置每一次偏移的距离
        var speed = offset / (time / interval);
        var Left = parseInt(oImgs.style.left) + offset;
        function go() {
            if (
                // 判断右边按钮点击时，动画是否执行完，如果执行完走else
                (speed < 0 && parseInt(oImgs.style.left) > Left) ||
                // 判断左边按钮点击时，动画是否执行完，如果执行完走else
                (speed > 0 && parseInt(oImgs.style.left) < Left)
            ) {
                // 如果偏移没有结束的话，让他继续偏移1
                oImgs.style.left = parseInt(oImgs.style.left) + speed + "px";
                //   偏移定时器
                setTimeout(go, interval);
            } else {
                flag = true;
                //   判断左边的边界
                if (Left > -1226) {
                    Left = -6130;
                }
                //   判断右边的边界
                if (Left < -6130) {
                    Left = -1226;
                }
                oImgs.style.left = Left + "px";
            }
        }
        go();
    };
    var index = 1;
    oRight.onclick = function () {
        if (flag) {
            // console.log(1);
            index++;
            if (index > 5) {
                index = 1;
            }
            animate(-1226);
            showBtns();
        }
    };
    oLeft.onclick = function () {
        if (flag) {
            index--;
            if (index < 1) {
                index = 5;
            }
            animate(1226);
            showBtns();
        }
    };
    var timer = null;
    // 轮播图片的时间
    function move() {
        timer = setInterval(() => {
            oRight.onclick();
        }, 3000);
    }
    move();
    // 3.小圆点切换
    // 给所有的小圆点绑定点击事件
    for (let i = 0; i < oBtns.length; i++) {
        oBtns[i].onclick = function () {
            if (flag) {
                //判断当前图片是否在偏移，如果没有偏移，就可以设置偏移
                if (this.className == "on") {
                    //如果点击时当前的span有没有class，如果有
                    // 的话，就直接结束方法
                    return;
                }
                // 获取点击当前小圆点的下标
                var nowIndex = this.getAttribute("index");
                // 调用animate，进行偏移（当前的index-上一次停留的index）
                // console.log("index", index);
                // console.log("nowIndex", nowIndex);
                animate(-1226 * (nowIndex - index));
                // 重新赋值给index
                index = nowIndex;
                showBtns();
            }
        };
    }
    // 小圆点点击高亮显示
    function showBtns() {
        for (let i = 0; i < oBtns.length; i++) {
            if (oBtns[i].className == "on") {
                oBtns[i].className = "";
                break;
            }
        }
        oBtns[index - 1].className = "on";
    }
    // 鼠标移入到容器时，关闭自动轮播
    oBox.onmouseover = function () {
        oTrun.style.display = 'block';
        clearInterval(timer);
    };
    //6. 鼠标移出容器时，重启定时器
    oBox.onmouseout = function () {
        oTrun.style.display = 'none';
        move();
    };
}   